import React, { Component } from 'react'
import "./Website.css"

import axios from "../../utils/http"

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export default class website extends Component {
    state = {
        title: "",
        url: "",
        keywords: "",
        gjz: "",
        data: [],
        isdbclick: false,
        dbid: null
    }
    render() {
        // let { title, url, keywords } = this.props;
        return (
            <div className="website-container">
                <ToastContainer />
                <h2>网址管理</h2>
                <hr />
                <div className="form">
                    名称: <input type="text" value={this.state.title} name="title" onChange={this.savaData} />&nbsp;&nbsp;
                    网址: <input type="text" value={this.state.url} name="url" onChange={this.savaData} />&nbsp;&nbsp;
                    关键字: <input type="text" value={this.state.keywords} name="keywords" onChange={this.savaData} />&nbsp;&nbsp;
                    <button className="add" onClick={this.add}>新增</button>
                </div>
                <hr />
                <div className="search">
                    <input type="text" value={this.state.gjz} name="gjz" onChange={this.savaData} />
                    <button onClick={this.search} className='add'>搜索</button>
                </div>
                <hr />
                <table border="1">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>网站名称</th>
                            <th>网址</th>
                            <th>关键字</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            this.state.data.map(item => {
                                return <tr key={item.id}>
                                    <td>{item.id}</td>
                                    <td>{item.title}</td>
                                    <td onDoubleClick={this.handleclick(item.id)}>
                                        {
                                            this.state.isdbclick && this.state.dbid === item.id ? (<input
                                                type="text"
                                                defaultValue={item.url}
                                                onBlur={this.update(item.id)}
                                                autoFocus
                                            />) : (item.url)
                                        }
                                    </td>
                                    <td>{item.keywords}</td>
                                    <td><button className='add search' onClick={this.remove(item.id)}>删除</button></td>
                                </tr>
                            })
                        }
                        {
                            this.state.data.length === 0 && <tr><th colSpan="5">没有数据啦,请继续新增</th></tr>
                        }
                    </tbody>
                </table>
            </div >
        )
    }
    handleclick = (id) => {
        return () => {
            this.setState({
                isdbclick: true,
                dbid: id
            })
        }
    }
    update = (id) => {
        return async (e) => {
            await axios.patch("/website/" + id, { url: e.target.value })
            toast.success("更新成功", {
                position: toast.POSITION.TOP_CENTER,
            });
            let { data } = this.state;
            let newdata = data.map(item => {
                if (item.id === id) {
                    item.url = e.target.value
                }
                return item
            })
            this.setState({
                isdbclick: false,
                data: newdata
            })
        }
    }
    savaData = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    add = async () => {
        let { title, url, keywords } = this.state;

        let obj = {
            title, url, keywords
        }
        try {
            let result = await axios.post("/website", obj);
            this.setState({
                title: "",
                url: "",
                keywords: ""
            })
            let { data } = this.state;
            let newData = [...data, result.data];
            this.setState({
                data: newData
            })
            toast.success("☺添加成功☺", {
                position: toast.POSITION.TOP_CENTER,
                autoClose: 2500,
                closeOnClick: true,
                pauseOnFocusLoss: false
            });
        } catch (e) {
            toast.error("☹网络异常, 检查服务或网络☹", {
                position: toast.POSITION.TOP_CENTER,
                autoClose: 2500,
                closeOnClick: true,
                pauseOnFocusLoss: false
            });
        }
    }
    search = async () => {
        let { gjz } = this.state;
        let result = await axios("/website", {
            params: {
                q: gjz
            }
        })
        let newdata = result.data;
        this.setState({ data: newdata });
    }
    remove = (id) => {
        return async () => {
            if (window.confirm('您确定要删除当前的网址么??')) {
                ;
                let { data } = this.state;
                await axios.delete("/website/" + id)
                let newdata = data.filter(item => {
                    return item.id !== id
                })
                this.setState({
                    data: newdata
                })
                toast.success("☺删除成功☺", {
                    position: toast.POSITION.TOP_CENTER,
                    autoClose: 2500,
                    closeOnClick: true,
                    pauseOnFocusLoss: false
                });
            }
        }
    }
    async componentDidMount() {
        let result = await axios("/website");
        this.setState({
            data: result.data
        })
    }
}
